<template>
  <div class="notice-container">
    <!-- 统计卡片区域 -->
    <el-row :gutter="20" class="stats-row">
      <el-col :span="6" v-for="(stat, index) in noticeStats" :key="stat.title">
        <el-card :class="['stat-card', `stat-card-${index + 1}`]">
          <template #header>
            <div class="card-header">
              <el-icon>
                <component :is="stat.icon"></component>
              </el-icon>
              <span>{{ stat.title }}</span>
            </div>
          </template>
          <div class="card-content">
            <div class="card-number">{{ stat.count }}</div>
            <div class="card-label">{{ stat.label }}</div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 通知列表区域 -->
    <el-card class="notice-card">
      <template #header>
        <div class="notice-header">
          <div class="title">
            <el-icon>
              <Bell />
            </el-icon>
            <span>通知公告</span>
          </div>
          <el-button type="primary" :icon="Plus" @click="handleAdd">
            发布通知
          </el-button>
        </div>
      </template>

      <!-- 通知列表 -->
      <el-timeline>
        <el-timeline-item v-for="notice in noticeList" :key="notice.id" :type="getNoticeType(notice.type)"
          :timestamp="notice.create_time" :hollow="true" size="large">
          <el-card class="notice-item">
            <template #header>
              <div class="notice-item-header">
                <div class="left">
                  <el-tag :type="getNoticeType(notice.type)" effect="dark">
                    {{ notice.type }}
                  </el-tag>
                  <h3>{{ notice.title }}</h3>
                </div>
                <div class="right">
                  <el-button-group>
                    <el-button :icon="View" size="small" @click="handleView(notice)">
                      查看
                    </el-button>
                    <el-button type="danger" :icon="Delete" size="small" @click="handleDelete(notice)">
                      删除
                    </el-button>
                  </el-button-group>
                </div>
              </div>
            </template>
            <div class="notice-content">
              <p>{{ notice.content }}</p>
              <div class="notice-footer">
                <span>发布人：{{ notice.publisher }}</span>
                <span>阅读量：{{ notice.views }}</span>
              </div>
            </div>
          </el-card>
        </el-timeline-item>
      </el-timeline>
    </el-card>

    <!-- 发布通知对话框 -->
    <el-dialog v-model="dialogVisible" title="发布通知" width="50%" center destroy-on-close class="notice-dialog">
      <el-form ref="formRef" :model="noticeForm" :rules="rules" label-width="100px" class="notice-form">
        <el-form-item label="标题" prop="title">
          <el-input v-model="noticeForm.title" placeholder="请输入通知标题" />
        </el-form-item>

        <el-form-item label="类型" prop="type">
          <el-select v-model="noticeForm.type" placeholder="请选择通知类型" class="w-full">
            <el-option v-for="type in noticeTypes" :key="type" :label="type" :value="type" />
          </el-select>
        </el-form-item>

        <el-form-item label="内容" prop="content">
          <el-input v-model="noticeForm.content" type="textarea" :rows="6" placeholder="请输入通知内容..." />
        </el-form-item>

        <el-form-item label="附件">
          <el-upload class="notice-uploader" action="#" :auto-upload="false" :on-change="handleFileChange">
            <el-button type="primary" :icon="Upload">点击上传</el-button>
          </el-upload>
        </el-form-item>
      </el-form>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="handleSubmit" :loading="submitLoading">
            发 布
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import {
  Bell,
  Plus,
  View,
  Delete,
  Upload,
  Document,
  MessageBox,
  Reading,
  Timer
} from '@element-plus/icons-vue'

// 统计数据
const noticeStats = [
  {
    title: '通知总数',
    count: 156,
    label: '本月发布',
    icon: Document
  },
  {
    title: '未读通知',
    count: 23,
    label: '待处理',
    icon: MessageBox
  },
  {
    title: '阅读量',
    count: 1234,
    label: '总浏览',
    icon: Reading
  },
  {
    title: '最近更新',
    count: '2小时前',
    label: '更新时间',
    icon: Timer
  }
]

// 通知类型
const noticeTypes = ['通知', '公告', '提醒', '重要']

// 通知列表数据
const noticeList = ref([
  {
    id: 1,
    title: '关于五一假期宿舍管理的通知',
    content: '为确保假期宿舍安全...',
    type: '通知',
    publisher: '宿管处',
    views: 156,
    create_time: '2024-04-28 10:00:00'
  },
])

// 获取通知类型对应的样式
const getNoticeType = (type) => {
  const types = {
    '通知': 'primary',
    '公告': 'success',
    '提醒': 'warning',
    '重要': 'danger'
  }
  return types[type] || 'info'
}

// 表单数据
const dialogVisible = ref(false)
const submitLoading = ref(false)
const formRef = ref(null)
const noticeForm = ref({
  title: '',
  type: '',
  content: '',
  files: []
})

// 表单验证规则
const rules = {
  title: [
    { required: true, message: '请输入标题', trigger: 'blur' },
    { min: 3, max: 50, message: '长度在 3 到 50 个字符', trigger: 'blur' }
  ],
  type: [
    { required: true, message: '请选择类型', trigger: 'change' }
  ],
  content: [
    { required: true, message: '请输入内容', trigger: 'blur' },
    { min: 10, message: '内容不能少于 10 个字符', trigger: 'blur' }
  ]
}

</script>

<style scoped>
.notice-container {
  padding: 20px;
  min-height: 100vh;
  background: #f0f2f5;
}

.stats-row {
  margin-bottom: 20px;
}

.stat-card {
  border: none;
  border-radius: 16px;
  transition: all 0.3s;
  overflow: hidden;
}

.stat-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

.stat-card-1 {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.stat-card-2 {
  background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%);
}

.stat-card-3 {
  background: linear-gradient(135deg, #2dd4bf 0%, #0ea5e9 100%);
}

.stat-card-4 {
  background: linear-gradient(135deg, #84fab0 0%, #8fd3f4 100%);
}

.card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.card-header .el-icon {
  font-size: 24px;
  color: white;
  background: rgba(255, 255, 255, 0.2);
  padding: 8px;
  border-radius: 12px;
}

.card-header span {
  color: white;
  font-size: 18px;
  font-weight: 500;
}

.card-content {
  padding: 20px;
  text-align: center;
  color: white;
}

.card-number {
  font-size: 36px;
  font-weight: bold;
  margin-bottom: 5px;
}

.card-label {
  font-size: 14px;
  opacity: 0.8;
}

.notice-card {
  background: white;
  border-radius: 16px;
  border: none;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
}

.notice-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.notice-header .title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  font-weight: 500;
}

.notice-item {
  margin-bottom: 20px;
  border-radius: 8px;
  transition: all 0.3s;
}

.notice-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.05);
}

.notice-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.notice-item-header .left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.notice-item-header h3 {
  margin: 0;
  font-size: 16px;
}

.notice-content {
  color: #666;
  font-size: 14px;
  line-height: 1.6;
}

.notice-footer {
  margin-top: 15px;
  display: flex;
  justify-content: space-between;
  color: #999;
  font-size: 12px;
}

.notice-dialog :deep(.el-dialog) {
  border-radius: 16px;
  overflow: hidden;
}

.notice-dialog :deep(.el-dialog__header) {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 20px;
  margin: 0;
}

.notice-dialog :deep(.el-dialog__title) {
  color: white;
  font-size: 18px;
  font-weight: 500;
}

.notice-form {
  padding: 30px 20px;
}

:deep(.el-timeline-item__node--large) {
  width: 16px;
  height: 16px;
}

:deep(.el-timeline-item__wrapper) {
  padding-left: 28px;
}

:deep(.el-button--primary) {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
}

:deep(.el-button--primary:hover) {
  transform: translateY(-2px);
  box-shadow: 0 8px 15px rgba(102, 126, 234, 0.2);
}
</style>
